<template>
  <div class="container">
    <div class="header">
      <div class="header_info">
        <div class="header_info_top">
          <div class="header_info_top_one">
            <div class="header_info_img">
              <img :src="userInfo.head_ico" style="border-radius: 50%;">
            </div>
            <div class="header_info_text">
              <div class="header_text">
                <p>{{userInfo.true_name}}</p>
                <span>码主</span>
              </div>
              <p>ID:{{userInfo.user_id}}</p>
            </div>
          </div>
          <div class="header_info_top_two">
            <img @click="go('/Myinfo')" src="../assets/member_05.png" alt="">
            <img @click="go('/settings')" src="../assets/member_06.png" alt="">
          </div>
        </div>
        <div class="header_info_center">
          <ul>
            <!-- <li>
              <p>{{userInfo.fans}}</p>
              <span>粉丝</span>
            </li>-->
            <li>
              <p>{{userInfo.coupon}}</p>
              <span>代金券</span>
            </li>
            <li @click="go('/collection')">
              <p>{{userInfo.collection}}</p>
              <span>收藏</span>
            </li>
            <li>
              <p>{{userInfo.share}}</p>
              <span>分享</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cnet1">
        <span class="se1sp1">热门</span>
        <span class="se1sp2">全部</span>
      </div>
      <div class="cnet2">
        <van-row type="flex" justify="space-around">
          <van-col  class="cnet21" span="6">
            <div @click="Fuk">
              <img src="../assets/zu-03.png" alt="">
              <p>待付款</p>
            </div>
          </van-col>
          <van-col  class="cnet21" span="6">
            <div @click="Fak">
              <img src="../assets/zu-01.png" alt="">
              <p>待发货</p>
            </div>
          </van-col>

          <van-col class="cnet21" span="6">
            <div @click="Shou" >
              <img src="../assets/zu-02.png" alt="">
              <p>待收货</p>
            </div>

          </van-col>
          <van-col  class="cnet21" span="6">
            <div @click="Ping">
                <img src="../assets/zu-05.png" alt="">
                <p>待评价</p>
            </div>

          </van-col>
          <van-col  class="cnet21" span="6">
            <div @click="Tui">
                <img src="../assets/zu-04.png" alt="">
                <p>退款/售后</p>
            </div>

          </van-col>
        </van-row>
      </div>
    </div>
    <div class="one1">
      <img src="../assets/banner.png" alt="">
    </div>
    <div class="one2">
      <div class="one21">
        <div class="oe11">
          <span>
            <img src="../assets/huiyuan.png" alt="">
          </span>
          <span>会员中心</span>
        </div>
      </div>
      <div class="one21">
        <div class="oe11">
          <span>
            <img src="../assets/person.png" alt="">
          </span>
          <span>邀请好友</span>
        </div>
      </div>
    </div>
    <div class="one3" id="one3">
      <div class="oe31">
        <span>我的积分</span>
      </div>
      <div class="oe33">
        <span>{{userInfo.point}}</span>
      </div>
      <div id="oe32">
        <span>转赠</span>
      </div>
    </div>
    <div class="one3">
      <div class="oe31">
        <span>可用余额（元）</span>
      </div>
      <div class="oe33">
        <span>{{userInfo.balance}}</span>
      </div>
      <div class="oe32">
        <span>充值</span>
      </div>
    </div>
    <div class="content1">
      <div class="cnet1">
        <span class="se1sp1">我的工具</span>
        <!-- <span class="se1sp2">全部</span> -->
      </div>
      <div class="cnet2">
        <van-row type="flex" justify="space-around">
          <van-col class="cnet21" span="6">
            <img src="../assets/zu-03.png" alt="">
            <p>专属客服</p>
          </van-col>
          <!-- <van-col class="cnet21" span="6">
            <img src="../assets/zu-01.png" alt>
            <p>一键分享</p>
          </van-col>-->
          <van-col class="cnet21" span="6">
            <img src="../assets/zu-05.png" alt="">
            <p>新手指引</p>
          </van-col>
          <van-col class="cnet21" span="6">
            <img src="../assets/zu-02.png" alt="">
            <p>常见问题</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="content2">
      <!-- <div class="cnet22">
        <span class="ce2sp1">
          <img src="../assets/tuo-02.png" alt>
          <p>申请运营</p>
        </span>
        <span class="ce2sp2">
          <van-icon style="margin-right:0.2rem;" name="arrow"/>
        </span>
      </div>
      <div class="cnet22">
        <span class="ce2sp1">
          <img src="../assets/tuo-01.png" alt>
          <p>申请运营</p>
        </span>
        <span class="ce2sp2">
          <van-icon style="margin-right:0.2rem;" name="arrow"/>
        </span>
      </div>-->
    </div>
    <footer-nav :active="2"></footer-nav>
  </div>
</template>

<script>
import FooterNav from "../components/FooterNav";
export default {
  name: "Member",
  data() {
    return {
      active: 0,
      userInfo: {} //用户信息
    };
  },
  components: {
    FooterNav
  },
  mounted() {
    this.request({
      url: "?controller=theapi&action=userinfo",
      method: "get"
    }).then(res => {
      this.userInfo = res.data.data;
      console.log(res.data.data.user_id);
      if (!res.data.data.user_id) {
        this.$router.push({ name: "login" });
      }
    });
  },
  methods: {
    go(path) {
      this.$router.push({ path });
    },
    Fuk() {
      this.$router.push({ name:'orderlist',params:{index:1} });

    },
    Fak() {
      this.$router.push({ name:'orderlist',params:{index:2} });

    },
    Shou() {
      this.$router.push({ name:'orderlist',params:{index:3} });

    },
    Ping() {
      this.$router.push({ name:'orderlist',params:{index:4} });

    },
    Tui() {
      this.$router.push({ name:'orderlist',params:{index:5} });
      // window.location.href="http://app.ztsx123.com/1/#/nine  => http://app.ztsx123.com/1/#/four"
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/lib/reset.scss";
html,
body,
.container {
  @include rect(100%, 100%); // 宽为100%, 高为100%
  background: #f5f6f7 !important;
}
.container {
  @include flexbox();
  @include flex-direction(column);
  @include justify-content(space-between);
  .header {
    position: absolute;
    top: 0;
    @include rect(100%, 4.4rem);
    @include padding(0 0.3rem 0);
    background: url(../assets/member_01.png) no-repeat 100% 100%;
    .header_info_top {
      @include margin(0.2rem 0 0 0);
      @include rect(100%, 0.88rem);
      @include flexbox();
      @include justify-content(space-between);
      .header_info_top_one {
        @include flexbox();
        .header_info_img {
          @include rect(0.88rem, 0.88rem);
          border: 1px solid #fff;
          border-radius: 50%;
          @include margin(0 0.23rem 0 0);
          > img {
            @include rect(100%, 100%);
          }
        }
        .header_info_text {
          @include flexbox();
          @include flex-direction(column);
          .header_text {
            @include flexbox();
            @include align-items(center);
            margin-bottom: 0.1rem;
            > p {
              font-size: 0.32rem;
              font-family: PingFang-SC-Bold;
              font-weight: bold;
              color: #fff;
              @include margin(0 0.2rem 0 0);
            }
            > span {
              display: block;
              @include line-height(0.4rem);
              text-align: center;
              @include rect(0.76rem, 0.4rem);
              background: #fff;
              border-radius: 0.15rem;
              font-size: 0.2rem;
              font-family: PingFang-SC-Medium;
              font-weight: 500;
              color: #fa3069;
            }
          }
          > p {
            font-size: 0.24rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: #fff;
          }
        }
      }
      .header_info_top_two {
        @include flexbox();
        @include align-items(center);
        > img {
          @include rect(0.42rem, 0.4rem);
          @include margin(0 0 0 0.2rem);
        }
      }
    }
    .header_info_center {
      @include rect(100%, 1.36rem);
      > ul {
        @include rect(90%, 100%);
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        @include margin(0.2rem auto);
        > li {
          @include flexbox();
          @include flex-direction(column);
          @include justify-content(space-between);
          @include align-items(center);
          height: 60%;
          > p {
            font-size: 0.3rem;
            font-family: DIN-Bold;
            font-weight: bold;
            color: #fff;
          }
          > span {
            font-size: 0.26rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: #fff;
          }
        }
      }
    }
  }
  .content {
    @include margin(4.4rem 0 0 0);
    @include flex();
    @include rect(92%, auto);
    @include overflow();
    @include flex-direction(column);
    @include padding(0 0.3rem 0.4rem);
    position: absolute;
    top: -1.7rem;
    background: #fff;
    left: 50%;
    margin-left: -3.45rem;
    border-radius: 0.2rem;
  }
  .content1 {
    @include margin(0.3rem auto);
    @include flex();
    @include rect(92%, auto);
    @include overflow();
    @include flex-direction(column);
    @include padding(0 0.3rem 0.4rem);
    background: #fff;
    border-radius: 0.2rem;
  }
  .content2 {
    @include margin(0rem auto 2rem auto);
    @include flex();
    @include rect(92%, auto);
    @include overflow();
    background: #fff;
    border-radius: 0.2rem;
    @include padding(0 0 0 0.25rem);
  }
  .content2 div:nth-child(1) {
    border-bottom: 0.01rem solid #ebedf0;
  }
  .cnet22 {
    width: 100%;
    height: 1rem;
    @include flexbox();
    @include align-items(center);
    @include justify-content(space-between);
    > .ce2sp1 {
      @include flexbox();
      @include align-items(center);
      > img {
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 0.2rem;
      }
    }
  }
  .cnet1 {
    @include flexbox();
    @include justify-content(space-between);
    padding: 0.2rem 0;
  }
  .se1sp1 {
    font-size: 0.3rem;
    font-weight: bold;
  }
  .cnet2 {
    border-top: 0.01rem solid #ebedf0;
  }
  .cnet21 {
    text-align: center;
  }
  .cnet21 img {
    margin-top: 0.33rem;
    width: 0.4rem;
    height: 0.4rem;
    margin-bottom: 0.25rem;
  }
  .one1 {
    @include margin(5.7rem auto 0 auto);
    @include rect(92%, 1.8rem);
    background: #fff;
    border-radius: 0.2rem;
    img {
      @include rect(100%, 100%);
    }
  }
  .one2 {
    @include margin(0.3rem auto 0.3rem auto);
    @include rect(92%, 1.2rem);
    background: #fff;
    border-radius: 0.2rem;
    @include flexbox();
    @include flex-wrap(wrap);
    .one21 {
      @include rect(50%, 90%);
      line-height: 1.28rem;
    }
  }
  .oe11 {
    @include rect(70%, 0.7rem);
    @include flexbox();
    @include justify-content(space-around);
    margin-left: 0.4rem;
  }
  .oe11 span {
    font-size: 0.3rem;
  }
  .oe11 span img {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.1rem;
  }
  .one2 .one21:nth-child(1) {
    width: 50%;
    border-right: 0.01rem solid #ebedf0;
  }
  .one2 .one21:nth-child(2) {
    width: 50%;
  }

  .one3 {
    @include margin(0 auto);
    @include rect(92%, 1.15rem);
    background: #fff;
    @include flexbox();
    @include justify-content(space-between);
    align-items: center;
    padding: 0 0.2rem;
    font-size: 0.28rem;
  }
  #one3 {
    border-bottom: 0.01rem solid #ebedeb;
  }
  .oe31 {
    width: 40%;
  }
  .oe33 {
    width: 40%;
  }
  .oe32 {
    @include flexbox();
  }
  .oe32 span {
    display: inline-block;
    width: 1.3rem;
    height: 0.45rem;
    font-size: 0.25rem;
    border-radius: 0.12rem;
    text-align: center;
    line-height: 0.45rem;
    background: #fa3069;
    color: #fff;
  }
  #oe32 span {
    display: inline-block;
    width: 1.3rem;
    height: 0.45rem;
    font-size: 0.25rem;
    border-radius: 0.12rem;
    text-align: center;
    line-height: 0.45rem;
    border: 1px solid #fe4e67;
    color: #fe4e67;
  }

  .footer {
    @include rect(100%, 0.98rem);
    position: fixed;
    bottom: 0;
    border-top: 1px solid #e6e8ec;
    background: #fff;
    > ul {
      @include rect(100%, 100%);
      @include padding(0 0.3rem 0);
      @include flexbox();
      @include justify-content(space-between);
      @include align-items(center);
      li {
        height: 86%;
        @include flexbox();
        @include flex-direction(column);
        @include justify-content(space-around);
        @include align-items(center);
        > img {
          @include rect(0.44rem, 0.44rem);
        }
        > p {
          font-size: 0.22rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          color: #282c35;
        }
      }
    }
  }
}
</style>
